<template>
  <div class="settle-manage">
    <div style="float: right; margin-bottom: 20px;">
      <el-input 
        v-model="dataFilter.text" 
        :suffix-icon="Search" 
        placeholder="房间号/用户名"
        @change="handleSearch"
      />
    </div>

    <el-table
      :data="sourceData.list"
      border
      highlight-current-row
      stripe
    >
      <el-table-column label="房间号" prop="houseNum" />
      <el-table-column label="用户名" prop="userName" />
      <el-table-column label="气表名" prop="gmEquipName" />
      <el-table-column label="用气量(m³)" prop="gasTotal" width="100"/>
    </el-table>
    <Pagination :pageProps="pageProps" layout="prev, pager, next" @current-change="getList" />
  </div>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getEquipList } from '@/api/settle'
import Pagination from '@/components/Pagination/Index.vue'

const dataFilter = reactive({
  text: undefined,
})

const pageProps = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

const sourceData = reactive({
  list: [] as any,
})

const projectId = ref(null)

const getList = () => {
  getEquipList({
    projectId: projectId.value,
    pageNum: pageProps.value.pageNum,
    pageSize: pageProps.value.pageSize,
    ...dataFilter
  }).then((res)=>{
    console.log('res', res)
    sourceData.list = res.data.records
    // TODO use real api total res total
    pageProps.value.total = res.data.total
  })
  .catch((err) => {
    console.error('err', err)
  })
}

getList()

const handleSearch = () => {
  getList()
}

defineExpose({ getList, projectId })
</script>

<style lang="scss" scoped></style>
